<template>
  <div>
    <a-button type="primary" @click="drawerData.show=true">获取选中</a-button>
    <i-drawer :drawerData="drawerData" @dialogSbumit="dialogSbumit" @dialogCancel="dialogCancel" @cancel="dialogCancel">
      <div>
          我是内容
      </div>
      <template #but_template>
            自定义按钮
      </template>
  </i-drawer>
  <lib-doc :libDocData="libDocData"></lib-doc>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { IDrawer } from 'wd-platform-library'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { DrawerIntreFace } from 'wd-platform-library/lib/src/IDrawer/src/IDrawerInterFace'

export default defineComponent({
    name: 'i_diaolg_demo',
    setup () {
        const drawerData = reactive<DrawerIntreFace>({
            width: 1200, // 弹框宽度
            buttonList: [
                {
                    label: '取消',
                    buttonFun: 'dialogCancel',
                    options: {
                        type: 'default'
                    },
                    isShow: true
                },
                {
                    label: '确定',
                    buttonFun: 'dialogSbumit',
                    options: {
                        type: 'primary'
                    },
                    loading: false,
                    isShow: true
                },
                {
                    label: '自定义按钮',
                    buttonFun: '',
                    template: 'but_template',
                    isShow: true
                }
            ],
            show: false, // 弹框是否展示
            title: '设置权限' // 弹框名字
        })
        const dialogCancel = () => {
            alert('我点击了取消')
            drawerData.show = false
        }
        const dialogSbumit = () => {
            alert('我点击了提交')
            drawerData.loading = true
            setTimeout(() => {
                drawerData.loading = false
                drawerData.show = false
            }, 3000)
        }

        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '引入组件',
                    type: 'pre',
                    value: `
        import { IDrawer } from 'wd-platform-library'`
                },
                {
                    label: '组件使用',
                    type: 'pre',
                    value: `
        <i-drawer :drawerData="drawerData" @dialogSbumit="dialogSbumit" @dialogCancel="dialogCancel" @cancel="dialogCancel">
            <div>
                我是内容
            </div>
            <template #but_template>
                    自定义按钮
            </template>
        </i-drawer>`
                },
                {
                    label: '创建抽屉对象',
                    type: 'pre',
                    value: `
        const drawerData = reactive<DrawerIntreFace>({
            width: 1200, // 弹框宽度
            buttonList: [
                {
                    label: '取消',
                    buttonFun: 'dialogCancel',
                    options: {
                        type: 'default'
                    },
                    isShow: true
                },
                {
                    label: '确定',
                    buttonFun: 'dialogSbumit',
                    options: {
                        type: 'primary'
                    },
                    loading: false,
                    isShow: true
                },
                {
                    label: '自定义按钮',
                    buttonFun: '',
                    template: 'but_template',
                    isShow: true
                }
            ],
            show: false, // 弹框是否展示
            title: '设置权限' // 弹框名字
        })`
                },
                {
                    label: '按钮回调',
                    type: 'pre',
                    value: `
    //提交回调
    const dialogSbumit = () => {
            alert('提交')
    }
    //取消后调
    const dialogCancel = () => {
            dialogData.show = false
            alert('取消/关闭')
    }
    //@cancel 弹出框关闭后调
     注册cancel方法: <i-drawer :drawerData="drawerData" @cancel="dialogCancel"></i-drawer>`
                }
            ]
        }
        return {
            dialogSbumit,
            dialogCancel,
            libDocData,
            drawerData
        }
    },
    components: {
        IDrawer,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
